<template>
	<view class="homebox">
		<view class="czname">
			测站信息
		</view>
		<view class="czinput">
			<view class="lebox">
				名称：
			</view>
			<view class="leboxinput">
				<view class="">
					{{czoption.name}}
				</view>
				<!-- 				<uni-easyinput  v-model="czoption.name" placeholder="请输入内容"></uni-easyinput> -->
			</view>
		</view>
		<view class="czinput">
			<view class="lebox">
				编码：
			</view>
			<view class="">
				<view class="">
					{{czoption.devicename}}
				</view>
				<!-- 				<uni-easyinput disabled v-model="czoption.devicename" placeholder="请输入内容"></uni-easyinput> -->
			</view>
		</view>
		<view class="hetop">
			<view class="" style="margin: 0 auto;color: #418876">
				定位点
			</view>
			<!-- 			<view class="">
				<uni-easyinput v-model="czoption.devicename" placeholder="请输入内容"></uni-easyinput>
			</view> -->
		</view>
		<view class="czinput">
			<view class="lebox">
				经度：
			</view>
			<view class="">
				<view class="">
					{{czoption.longitude}}
				</view>
				<!-- 				<uni-easyinput disabled v-model="czoption.longitude" placeholder="经度"></uni-easyinput> -->
			</view>
			<view class="" style="margin-left: 30rpx;">
				度
			</view>
		</view>
		<view class="czinput">
			<view class="lebox">
				纬度：
			</view>
			<view class="">
				<view class="">
					{{czoption.latitude}}
				</view>
				<!-- 				<uni-easyinput disabled v-model="czoption.latitude" placeholder="纬度"></uni-easyinput> -->
			</view>
			<view class="" style="margin-left: 30rpx;">
				度
			</view>
		</view>
		<view class="hetop">
			<view class="" style="margin: 0 auto;color: #418876">
				MQTT参数
			</view>
		</view>
		<view class="czinput">
			<view class="lebox" style="width: 260rpx">
				clientid：
			</view>
			<view class="">
				<view class="" style="width: 400rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
					{{czoption.mqtt_clientid}}
				</view>
			</view>
		</view>
		<view class="czinput">
			<view class="lebox" style="width: 260rpx">
				username：
			</view>
			<view class="">
				<view class="" style="width: 400rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
					{{czoption.mqtt_username}}
				</view>
			</view>
		</view>
		<view class="czinput">
			<view class="lebox" style="width: 260rpx">
				passwd:
			</view>
			<view class="">
				<view class="" style="width: 400rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
					{{czoption.mqtt_passwd}}
				</view>
			</view>
		</view>
		<view class="czinput">
			<view class="lebox" style="width: 260rpx">
				mqtthosturl:
			</view>
			<view class="">
				<view class="" style="width: 400rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
					{{czoption.mqtt_mqtthosturl}}
				</view>
			</view>
		</view>
		<view class="czinput">
			<view class="lebox" style="width: 260rpx">
				port:
			</view>
			<view class="">
				<view class="" style="width: 400rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
					{{czoption.mqtt_port}}
				</view>
			</view>
		</view>
		<view class="czinput">
			<view class="lebox" style="width: 260rpx">
				publish_topic:
			</view>
			<view class="">
				<view class="" style="width: 400rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
					{{czoption.mqtt_publish_topic}}
				</view>
			</view>
		</view>
		<view class="hetop">
			<view class="" style="margin: 0 auto;color: #418876">
				测段参数
			</view>
			<!-- 			<view class="">
				<uni-easyinput v-model="czoption.devicename" placeholder="请输入内容"></uni-easyinput>
			</view> -->
		</view>
		<view class="czinput">
			<view class="lebox">
				断面形状：
			</view>
			<view class="">
				<uni-data-checkbox v-model="valuea" :localdata="range"></uni-data-checkbox>
			</view>
		</view>
		<view class="czinput">
			<view class="lebox">
				渠底宽度：
			</view>
			<view class="">
				<view class="">
					{{czoption.qu_dao_di_kuan}}
				</view>
				<!-- 				<uni-easyinput disabled v-model="czoption.latitude" placeholder="纬度"></uni-easyinput> -->
			</view>
		</view>
		<view class="czinput">
			<view class="lebox">
				设计水深：
			</view>
			<view class="">
				<view class="">
					{{czoption.shui_shen}}
				</view>
				<!-- 				<uni-easyinput disabled v-model="czoption.latitude" placeholder="纬度"></uni-easyinput> -->
			</view>
		</view>
		<view class="czinput">
			<view class="lebox">
				设计流量：
			</view>
			<view class="">
				<view class="">
					{{czoption.designflow}}
				</view>
				<!-- 				<uni-easyinput disabled v-model="czoption.latitude" placeholder="纬度"></uni-easyinput> -->
			</view>
		</view>
		<view class="czinput">
			<view class="lebox">
				上限水深：
			</view>
			<view class="">
				<view class="">
					{{czoption.upperlimitdepth}}
				</view>
				<!-- 				<uni-easyinput disabled v-model="czoption.latitude" placeholder="纬度"></uni-easyinput> -->
			</view>
		</view>
		<view class="czinput">
			<view class="lebox">
				下限水深：
			</view>
			<view class="">
				<view class="">
					{{czoption.lowerlimitdepth}}
				</view>
				<!-- 				<uni-easyinput disabled v-model="czoption.latitude" placeholder="纬度"></uni-easyinput> -->
			</view>
		</view>
		<view class="czinput">
			<view class="lebox">
				渠底纵坡：
			</view>
			<view class="">
				<view class="">
					{{czoption.qu_di_zong_po}}
				</view>
				<!-- 				<uni-easyinput disabled v-model="czoption.latitude" placeholder="纬度"></uni-easyinput> -->
			</view>
		</view>
		<view class="czinput">
			<view class="lebox">
				渠坡糙率：
			</view>
			<view class="">
				<view class="">
					{{czoption.cao_lv}}
				</view>
				<!-- 				<uni-easyinput disabled v-model="czoption.latitude" placeholder="纬度"></uni-easyinput> -->
			</view>
		</view>
		<view class="hetop">
			<view class="" style="margin: 0 auto;color: #418876">
				边坡角度
			</view>
			<!-- 			<view class="">
						<uni-easyinput v-model="czoption.devicename" placeholder="请输入内容"></uni-easyinput>
					</view> -->
		</view>
		<view class="czinput">
			<view class="lebox">
				起侧边：
			</view>
			<view class="">
				<view class="">
					{{czoption.slope_left}}
				</view>
				<!-- 				<uni-easyinput disabled v-model="czoption.latitude" placeholder="纬度"></uni-easyinput> -->
			</view>
		</view>
		<view class="czinput">
			<view class="lebox">
				结束边：
			</view>
			<view class="">
				<view class="">
					{{czoption.slope_right}}
				</view>
				<!-- 				<uni-easyinput disabled v-model="czoption.latitude" placeholder="纬度"></uni-easyinput> -->
			</view>
		</view>
		<view class="hetop">
			<view class="" style="margin: 0 auto;color: #418876">
				标准测法
			</view>
			<!-- 			<view class="">
						<uni-easyinput v-model="czoption.devicename" placeholder="请输入内容"></uni-easyinput>
					</view> -->
		</view>
		<view class="czinput">
			<view class="lebox">
				测线条数：
			</view>
			<view class="">
				<view class="">
					{{czoption.ce_xian_tiao_shu}}
				</view>
				<!-- 				<uni-easyinput disabled v-model="czoption.latitude" placeholder="纬度"></uni-easyinput> -->
			</view>
		</view>
		<view class="czinput">
			<view class="lebox">
				测线布置：
			</view>
			<view class="">
				<uni-data-checkbox v-model="valueb" :localdata="cexianbuzhi"></uni-data-checkbox>
			</view>
		</view>
		<view class="czinput">
			<view class="lebox">
				默认测法：
			</view>
			<view class="">
				<uni-data-checkbox v-model="valuec" :localdata="dianfenbu"></uni-data-checkbox>
			</view>
		</view>
		<view class="hetop">
			<view class="" style="margin: 0 auto;color: #418876">
				边坡系数
			</view>
			<!-- 			<view class="">
						<uni-easyinput v-model="czoption.devicename" placeholder="请输入内容"></uni-easyinput>
					</view> -->
		</view>
		<view class="czinput">
			<view class="lebox">
				起侧边：
			</view>
			<view class="">
				<view class="">
					{{czoption.shore_left}}
				</view>
				<!-- 				<uni-easyinput disabled v-model="czoption.latitude" placeholder="纬度"></uni-easyinput> -->
			</view>
		</view>
		<view class="czinput">
			<view class="lebox">
				结束边：
			</view>
			<view class="">
				<view class="">
					{{czoption.shore_right}}
				</view>
				<!-- 				<uni-easyinput disabled v-model="czoption.latitude" placeholder="纬度"></uni-easyinput> -->
			</view>
		</view>
		<view class="czinput">
			<view class="lebox" style="width: 260rpx">
				自计水深修正：
			</view>
			<view class="">
				<view class="">
					{{czoption.shore_right}}
				</view>
				<!-- 				<uni-easyinput disabled v-model="czoption.latitude" placeholder="纬度"></uni-easyinput> -->
			</view>
		</view>
		<view class="hetop">
			<view class="" style="margin: 0 auto;color: #418876">
				单条测线
			</view>
			<!-- 			<view class="">
						<uni-easyinput v-model="czoption.devicename" placeholder="请输入内容"></uni-easyinput>
					</view> -->
		</view>
		<view class="qicebox">
			<view class="qicedian" v-if="positioncoor.length !== 0">
				<view class="cexianttop">
					测线编号
				</view>
				<view class="qiceitem" v-for="(item,index) in positioncoor" :key="index">
					{{item.zuobiao}}
				</view>
			</view>
			<view class="qicedian" v-if="positioncoor.length !== 0">
				<view class="cexianttop">
					坐标位置
				</view>
				<view class="qiceitem" v-for="(item,index) in linesplit" :key="index">
					{{item.num}}
				</view>
			</view>
			<view class="qicedian" v-if="positioncoor.length !== 0">
				<view class="cexianttop">
					流速系数
				</view>
				<view class="qiceitem" v-for="(item,index) in velocitycoe" :key="index">
					{{item.xishu}}
				</view>
			</view>
		</view>
		<view class="czinput">
			<view class="lebox">
				流量系数：
			</view>
			<view class="">
				<view class="">
					{{czoption.flowcoefficient}}
				</view>
				<!-- 				<uni-easyinput disabled v-model="czoption.latitude" placeholder="纬度"></uni-easyinput> -->
			</view>
		</view>
		<view class="czinput">
			<view class="lebox">
				水量系数：
			</view>
			<view class="">
				<view class="">
					{{czoption.watercoefficient}}
				</view>
				<!-- 				<uni-easyinput disabled v-model="czoption.latitude" placeholder="纬度"></uni-easyinput> -->
			</view>
		</view>
		<view class="hetop">
			<view class="" style="margin: 0 auto;color: #418876">
				边坡测线流速系数
			</view>
			<!-- 			<view class="">
						<uni-easyinput v-model="czoption.devicename" placeholder="请输入内容"></uni-easyinput>
					</view> -->
		</view>
		<view class="czinput">
			<view class="lebox">
				起始侧：
			</view>
			<view class="">
				<view class="">
					{{czoption.toe_left}}
				</view>
				<!-- 				<uni-easyinput disabled v-model="czoption.latitude" placeholder="纬度"></uni-easyinput> -->
			</view>
		</view>
		<view class="czinput">
			<view class="lebox">
				结束侧：
			</view>
			<view class="">
				<view class="">
					{{czoption.toe_right}}
				</view>
				<!-- 				<uni-easyinput disabled v-model="czoption.latitude" placeholder="纬度"></uni-easyinput> -->
			</view>
		</view>
		<view class="" style="height: 100rpx;">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				valuea: 0,
				czoption: {},
				range: [{
						"value": 1,
						"text": "梯形"
					},
					{
						"value": 0,
						"text": "矩形"
					},
				],
				valueb: 0,
				cexianbuzhi: [{
						"value": 1,
						"text": "均匀"
					},
					{
						"value": 2,
						"text": "不均匀"
					},
				],
				valuec: 0,
				dianfenbu: [{
						"value": 1,
						"text": "一点法"
					},
					{
						"value": 0,
						"text": "三点法"
					},
				],
				linenumber:'',
				linesplit:[],
				positioncoordinates:'',
				positioncoor:[],
				velocitycoefficient:'',
				velocitycoe:[],
			}
		},
		onLoad(option) {
			// this.arrlist = JSON.parse(decodeURIComponent(option.info))
			this.czoption = this.vuex_czoption
			this.valuea = this.czoption.duan_mian_xing_shi * 1
			this.valueb = this.czoption.cexiandecorate * 1
			this.valuec = this.czoption.ce_dian_fen_bu * 1
			
			this.velocitycoefficient = this.czoption.velocitycoefficient + ''
			this.velocitycoe = this.velocitycoefficient.split(',')
			this.velocitycoe = this.velocitycoe.map((item)=>{
				return {xishu:item}
			})
			
			this.positioncoordinates = this.czoption.linenumber + ''
			this.positioncoor = this.positioncoordinates.split(',')
			this.positioncoor = this.positioncoor.map((item)=>{
				return {zuobiao:item}
			})
			
			this.linenumber = this.czoption.positioncoordinates + ''
			this.linesplit = this.linenumber.split(',')
			this.linesplit = this.linesplit.map((item)=>{
				return {num:item}
			})
			
			
			console.log('打印');

		},
		onShow() {

		},
		methods: {

		}
	}
</script>
<style scoped lang="scss">
	.hetop {
		text-align: center;line-height: 60rpx; background-color: #d6fbfd;border-radius: 30rpx;font-size: 30rpx;font-weight: bold;
	}
	.homebox {
		width: 690rpx;
		padding: 0 30rpx;

		// background-color: #464ebf;
		.czname {
			display: flex;
			justify-content: center;
			line-height: 100rpx;
			font-size: 40rpx;
			color: #2dbfae;
		}

		.czinput {
			// height: 100rpx;
			font-size: 35rpx;
			padding: 20rpx 20rpx;
			// color: #2dbfae;
			display: flex;
			align-items: center;
			// background-color: #ffffff;
			border-bottom: 1rpx dashed #2dbfae;
			border-radius: 0rpx;
			margin-bottom: 20rpx;

			.lebox {
				width: 180rpx;
			}
		}

		.qicebox {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 20rpx;

			.qicedian {
				.cexianttop {
					width: 200rpx;
					text-align: center;
					// background-color: #2dbfae;
					border: #2dbfae solid 1rpx;
				}

				.qiceitem {
					width: 200rpx;
					text-align: center;
					// background-color: #2dbfae;
					border: #2dbfae solid 1rpx;
				}
			}
		}
	}
</style>
<style>
	page {
		/* background-color: #eaeaea; */
	}
</style>